<template>
    <div>
      <template>
          <div class="align-right">
              <el-form :inline="true" :model="listQuery">
                  <div class="pull-right">
                    <el-form-item>
                    <el-input
                            placeholder="请输入公共代码编码"
                            clearable
                            v-model="listQuery.masterKey">
                    </el-input>
                    </el-form-item>
                  <el-form-item>
                    <el-input
                            placeholder="请输入公共代码名称"
                            clearable
                            v-model="listQuery.name">
                    </el-input>
                    </el-form-item>
                    <el-form-item>
                    <el-input
                            placeholder="请输入公共代码小类"
                            clearable
                            v-model="listQuery.codeKey">
                    </el-input>
                    </el-form-item>
                    <el-form-item>
                    <el-input
                            placeholder="请输入公共代码小类名称"
                            clearable
                            v-model="listQuery.codeValue">
                    </el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="handleSearch" icon="el-icon-search" >搜索</el-button>
                    </el-form-item>
                  </div>
              </el-form>
            </div>
            <div class="table-master">
            <el-table
              class="mb20"
              ref="masterTable"
              :data="tableDataMaster"
              row-key="id"
              border
              height="398"
              highlight-current-row
              @row-click="RowClick"
              @current-change="CurrentChange"
              v-bind:class="{edit_master: ismaster}">
            
            <el-table-column align="center" label="序号" width ="100" >
                  <template slot-scope="scope">
                    <span >{{ scope.$index+1 }}</span>
                  </template>
                </el-table-column>
            <el-table-column
              align="center"
              label="公共代码编码">
              <template slot-scope="scope">  
                <el-input v-model="scope.row.masterKey"></el-input> 
                <span>{{ scope.row.masterKey }}</span> 
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="公共代码名称">
              <template slot-scope="scope"> 
                    <el-input  v-model="scope.row.name"></el-input>
                    <span >{{ scope.row.name }}</span>
                  </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="是否可用"
                width="">
                <template slot-scope="scope">
                <span >{{scope.row.enable?'是':'否'}}</span>
                <el-select  v-model="scope.row.enable">
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                width="200px"
                label="操作"
                :render-header="renderHeaderOne">
              <template slot-scope="scope">
              <div class="default">
                  <el-button type="text"  @click="editMaster(scope)">修改</el-button>
                  <el-button type="text" @click="removeMaster(scope)">删除</el-button>
              </div>
              <div class="confirm">
                <el-button type="text" @click="masterSubmit(scope)" >确认</el-button>
                  <el-button type="text" @click="masterCancle(scope)">取消</el-button>
              </div>
              </template>
            </el-table-column>
          </el-table>
          </div>
          <el-col :span="24" class="pagination-warp" v-if="tableDataMaster.length>0">
                <div class="text-center">
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                        :current-page="listQuery.currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="listQuery.size"
                        layout="total, sizes, prev, pager, next ,jumper"
                        :total="total">
                    </el-pagination>
                </div>
            </el-col>
      </template>
      <template>
        <div class="table-detail">
          <el-table
            class="mb20"
            ref="detailTable"
            :data="tableDataDetail"
            row-key="id"
            border
            height="398"
            @row-click="detailRowClick"
            highlight-current-row
            v-bind:class="{edit_detail: isdetail}">
            
            <el-table-column align="center" label="序号" width ="100" >
                  <template slot-scope="scope">
                    <span >{{ scope.$index+1 }}</span>
                  </template>
                </el-table-column>
            <el-table-column
              align="center"
              label="公共代码小类编码">
              <template slot-scope="scope">  
                <el-input v-model="scope.row.codeKey"></el-input> 
                <span>{{ scope.row.codeKey }}</span> 
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="公共代码小类名称">
              <template slot-scope="scope"> 
                    <el-input  v-model="scope.row.codeValue"></el-input>
                    <span >{{ scope.row.codeValue }}</span>
                  </template>
            </el-table-column>
            <el-table-column
                align="center"
                label="是否可用"
                width="">
                <template slot-scope="scope">
                <span >{{scope.row.enable == 1?'是':'否'}}</span>
                <el-select  v-model="scope.row.enable">
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                width="200px"
                label="操作"
                :render-header="renderHeaderTwo">
              <template slot-scope="scope">
              <div class="default">
                  <el-button type="text"  @click="editDetail(scope)">修改</el-button>
                  <el-button type="text" @click="removeDetail(scope)">删除</el-button>
              </div>
              <div class="confirm">
                <el-button type="text" @click="detailSubmit(scope)">确认</el-button>
                  <el-button type="text" @click="detailCancle(scope)">取消</el-button>
              </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        </template>
    </div>
</template>

<script>
import { getMasterList, updateMaster, insertMaster, delMaster } from '@/api/sys/master'
import { getDetail, updateDetail, insertDetail, delDetail } from '@/api/sys/detail'

export default {
  data() {
    return {
      tableDataMaster: [],
      tableDataDetail: [],
      total: null,
      ismaster: false,
      isdetail: false,
      adding: false,
      detailAdding: false,
      options: [
        {id:1,label:"是",value:1},
        {id:2,label:"否",value:0}
      ],
      selectedRow: null,
      tempMasterRow: {},
      tempDetailRow: {},
      listQuery: {
        currentPage: 1,
        size: 5,
        name: "",
        masterKey: "",
        codeKey: "",
        codeValue: ""
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    renderHeaderOne(h){
         return (
             <div>
                <span>操作</span>&nbsp;&nbsp;
                <el-button  size="small"  onClick={this.addMaster} round>添加</el-button>
             </div>
         )
    },
    renderHeaderTwo(h){
         return (
             <div>
                <span>操作</span>&nbsp;&nbsp;
                <el-button  size="small" onClick={this.addDetail} round>添加</el-button>
             </div>
         )
    },
    getList() {
      const _params = this.listQuery
      getMasterList(_params).then(response => {
        if (response.code === 0) {
          this.tableDataMaster = response.data.records
          this.total = response.data.total
          this.$nextTick(function () {
            if(this.tableDataMaster.length === 0){
              return
            }
            const row = this.tableDataMaster[0]
            this.$refs.masterTable.setCurrentRow(row)
            const _params = {}
            _params.masterKey = row.masterKey
            this.getTableDeatil(_params)
          })
        }
      })
    
    },
    handleSearch(){
      this.tableDataDetail = []
      this.listQuery.currentPage = 1
      this.getList()
    },
    CurrentChange(val){
      this.selectedRow = val
    },
    handleSizeChange(val) {
      this.listQuery.currentPage = 1
      this.listQuery.size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.currentPage = val
      this.getList()
    },
    addMaster(){
      if(this.adding) return
      const obj = {id:"",masterKey:"",name:"",enable:1}
      this.tableDataMaster.unshift(obj)
      this.recoveryMatserHighLight(obj)
      this.ismaster = true
      this.adding = true
    },
    addDetail(){
      if(this.detailAdding) return
      const obj = {id:"", masterKey:this.selectedRow.masterKey, codeKey:"", codeValue:"", enable:1 }
      this.tableDataDetail.unshift(obj)
      this.recoveryDetailHighLight(obj)
      this.isdetail = true
      this.detailAdding = true
    },
    masterSubmit(scope){
      const row = scope.row
      if(row.id === "") {
        insertMaster(row).then((response) => {
            if(response.code === 0) {
              this.getList()
              this.ismaster = false
              this.adding = false
              this.$message({
                type: 'success',
                message: response.msg
              })
            }
        })
      }else {
        updateMaster(row).then((response) => {
            if (response.code === 0){
              this.tableDataMaster[scope.$index] = response.data
              this.getList()
              this.ismaster = false
              this.$message({
                type: 'success',
                message: response.msg
              })
            }
            
        })
      }
    },
    detailSubmit(scope){
      const row = scope.row
      if(row.id === "") {
        insertDetail(row).then((response) => {
            if(response.code === 0) {
              const param = {masterKey:row.masterKey}
              this.getTableDeatil(param)
              this.isdetail = false
              this.detailAdding = false
              this.$message({
                type: 'success',
                message: response.msg
              })
            }
        })
      }else {
        updateDetail(row).then((response) => {
            if (response.code === 0){
              const param = {masterKey:row.masterKey}
              this.getTableDeatil(param)
              this.isdetail = false
              this.$message({
                type: 'success',
                message: response.msg
              })
            }
            
        })
      }
    },
    
    masterCancle(scope) {
      if(scope.row.id === ""){
        this.tableDataMaster.splice(scope.$index,1)
        this.tempMasterRow = {}
        this.ismaster = false
        this.adding = false
        this.$nextTick(function () {
          const row = this.tableDataMaster[0]
          this.$refs.masterTable.setCurrentRow(row)
          const _params = {}
          _params.masterKey = row.masterKey
          this.getTableDeatil(_params)
        })
        return
      }
      this.$set(this.tableDataMaster, scope.$index, this.tempMasterRow)
      this.recoveryMatserHighLight(this.tempMasterRow)
      this.ismaster = false
      
    },
    detailCancle(scope){
      if(scope.row.id === ""){
        this.$nextTick(function () {
          this.tableDataDetail.splice(scope.$index,1)
        })
        this.tempDetailRow = {}
        this.isdetail = false
        this.detailAdding = false
        return
      }
      this.$set(this.tableDataDetail, scope.$index, this.tempDetailRow)
      this.isdetail = false
    },
    editMaster(scope) {
      this.ismaster = true
      this.tempMasterRow = Object.assign({}, this.tempMasterRow, scope.row)
    },
    editDetail(scope) {
       this.isdetail = true
       this.tempDetailRow = Object.assign({}, this.tempDetailRow, scope.row)
    },
    removeMaster(scope) {
      const row = scope.row
      row.delFlag = 1
      this.$confirm('此操作将删除该行数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delMaster(row).then((response) => {
            if(response.code === 0) {
              this.getList()
              this.$message({
                type: 'success',
                message: response.msg
              })
            }
          })
        }).catch(() => {
        
        })
      
    },
    removeDetail(scope) {
      const row = scope.row
      row.delFlag = 1
       this.$confirm('此操作将删除该行数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delDetail(row).then((response) => {
            if(response.code === 0){
              const param = {masterKey:row.masterKey}
              this.getTableDeatil(param)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          })
          
        }).catch(() => {
        
        })
    },
    RowClick(row, eve, column) {
      if(row.id === "") return
      if(this.adding) {
        this.$nextTick(function () {
          this.tableDataMaster.splice(0,1)
        })  
        this.adding = false
      }
      if (row.id !== this.tempMasterRow.id) {
        this.ismaster = false
      }
      //判断重复获取子列表
      if (this.tableDataDetail.length != 0) {
        let firstDetail = this.tableDataDetail[0]
        if (firstDetail.masterKey === row.masterKey){
           return
        }
      }
      const _params = {}
      _params.masterKey = row.masterKey
      this.getTableDeatil(_params) 
      
    },
    detailRowClick(row, eve, column) {
      if(row.id === "") return
      if (this.detailAdding) {
        this.$nextTick(function () {
          this.tableDataDetail.splice(0,1)
        })  
         this.detailAdding = false
      }
       if (row.id !== this.tempDetailRow.id) {
        this.isdetail = false
      }
    },
    getTableDeatil(_params) {
      getDetail(_params).then((response) => {
        if (response.code === 0) {
          this.tableDataDetail = response.data
        }
      })
    },
    recoveryMatserHighLight(row){
      this.$nextTick(function () {
        this.$refs.masterTable.setCurrentRow(row)
      })
    },
    recoveryDetailHighLight(row){
      this.$nextTick(function () {
        this.$refs.detailTable.setCurrentRow(row)
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.table-master .el-input,.el-select,.confirm{
  display: none
}
.table-detail .el-input,.el-select,.confirm{
  display: none
}
.edit_master .current-row span {
    display: none
}
.edit_master .current-row .default {
    display: none
}
.edit_master .current-row .confirm{
    display: block;
}
.edit_master .current-row .el-select {
    display: block
}
.edit_master .current-row .el-input {
    display: block
}
.edit_detail .current-row span {
    display: none
}
.edit_detail .current-row .default {
    display: none
}
.edit_detail .current-row .confirm{
    display: block;
}
.edit_detail .current-row .el-select {
    display: block
}
.edit_detail .current-row .el-input {
    display: block
}
.table-search{
  margin: 10px;
  .el-input{
    width: 200px;
    margin-right: 6px;
  }
}

</style>
